<template>
  <div class="customer-detail">
    <el-card>
      <template #header>
        <div class="header">
          <h3>客户详情</h3>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
      </template>

      <div v-loading="loading">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="客户ID">{{ customer.id }}</el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{ customer.name }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ customer.phone }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ customer.createdAt }}</el-descriptions-item>
        </el-descriptions>

        <div class="account-section">
          <h4>账户信息</h4>
          <el-table :data="customer.accounts" border stripe>
            <el-table-column prop="accountNumber" label="账号" />
            <el-table-column prop="type" label="账户类型">
              <template #default="scope">
                <el-tag :type="scope.row.type === 'SAVING' ? 'success' : 'primary'">
                  {{ scope.row.type === 'SAVING' ? '储蓄账户' : '支票账户' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="余额">
              <template #default="scope">
                ¥ {{ scope.row.balance.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="开户时间" />
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { customerApi } from '../../api'

const route = useRoute()
const router = useRouter()
const customer = ref({
  id: '',
  name: '',
  phone: '',
  createdAt: '',
  accounts: []
})
const loading = ref(false)

onMounted(() => {
  fetchCustomer()
})

const fetchCustomer = async () => {
  loading.value = true
  try {
    const response = await customerApi.getCustomer(route.params.id)
    customer.value = response.data
  } catch (error) {
    console.error(error)
    ElMessage.error('获取客户信息失败')
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account-section {
  margin-top: 30px;
}
</style>